<template>
  <div class="bikeEchartslineTwo">
    <div id="bikeEchartslineTwo" style="width: 100%;height: 100%;"></div>
  </div>

</template>

<script>
  export default {
    data(){
      return {
        echartsNames: ["摩拜", "OFO"],
        perHourData: [[30, 10], [25, 20]],
        perHour: ["2019-06", "2019-07"],
        //---echarts
        titleEcharts: ["骑行车辆订单数", "数量(单)"],
        seriesDispose: [],
        colors: [],
      }
    },
    created(){
      this.axios.post(process.env.API_HOST + '/statis/selectCyclingOrderSum', {"parentId": 0, "regionType": 0})
        .then(response => {
          const result = response.data
          if (result.code == 200) {
            this.perHour = [], this.echartsNames = [], this.perHourData = [[], [], [], [], [], []]
            result.result.forEach((item, index) => {
              if (item.colletions.length > 0) {
                this.perHour.push(this.dtime(item.statisDate).format('MM-DD'))
                this.sortByKey(item.colletions, "enterpriseNo").forEach((item2, key) => {
                  this.echartsNames.push(item2.enterpriseName)
                  this.perHourData[key].push(item2.orderTotal)
                })
              }

            })
            this.unique(this.echartsNames)
            this.initData()
          }
        })
    },
    mounted(){

    },
    methods: {

      disposeData(){
        //处理颜色
        this.colors = []
        this.seriesDispose = []
        this.$store.state.companyInfos.forEach(item => {
          this.colors.push(item.color)
        })
        this.echartsNames.forEach((item, key) => {
          this.seriesDispose.push({
            name: item,
            type: 'line',
            symbol: 'circle',
            smooth: true,
            symbolSize: 5,
            showSymbol: false,
            data: this.perHourData[key],
            markPoint: {
              data: [
                {type: 'max', name: '最大值'},
//                {type: 'min', name: '最小值'}
              ]
            },
          },)
        })
      },
      initData(){
        this.disposeData()
        if (this.myChart != null && this.myChart != "" && this.myChart != undefined) {
          this.myChart.dispose();

        }

        this.myChart = this.echarts.init(document.getElementById('bikeEchartslineTwo'))
//        const colors = ['#FF4E17','#FED239',"green","#9f52d4","blue"]
        const option = {
          color: this.$store.state.colors,
          title: {
            show: false,
            text: "",
            subtext: '',
            x: 'left',
            textStyle: {
              fontSize: 14,
              fontWeight: 'bolder',
              color: "#3975FE"        // 主标题文字颜色
            },
          },
          /*toolbox: {
           show: true,
           x: 'right',                // 水平安放位置，默认为全图右对齐，可选为：
           // 'center' ¦ 'left' ¦ 'right'
           feature: {
           dataZoom: {
           yAxisIndex: 'none'
           },
           dataView: {readOnly: false},
           magicType: {type: ['line', 'bar']},
           restore: {},
           }
           },*/
          tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
              type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          legend: {
//            orient : 'vertical',
            x: 'right',
            data: this.echartsNames,
            textStyle: {
              fontSize: 12,
              color: 'gray'          // 主标题文字颜色
            },
          },
          grid: {
            left: '1%',
            right: '1%',
            bottom: '4%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              data: this.perHour,
              axisTick: {
                alignWithLabel: true
              },
              textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                color: 'gray'
              },
              axisLine: {
                lineStyle: {
                  color: 'gray',
                }
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: this.titleEcharts[1],
              min: 0,
              textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                color: 'gray'
              },
              axisLine: {
                lineStyle: {
                  color: 'gray'
                }
              }
            }
          ],
          series: this.seriesDispose
        };
        this.myChart.setOption(option);
      }
    },
    watch: {}
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../../common/stylus/mixin.styl"
  .bikeEchartslineTwo
    padding 10px
    width: 100%
    height 100%;
    box-sizing border-box
    border-radius 15px
    display: flex
    justify-content: center

</style>
